import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import _ from 'lodash'
import DailyBill from './components/DayBill'

const Month = () => {
  //按月做数据的分组，因后端返回的数据没分
  const billList=useSelector(state=>state.bill.billList)
  //数据二次处理,按月分组
  const monthGroup=useMemo(()=>{
    //return出计算之后的值,把数据按年月进行分组
    return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
  },[billList])

  //控制弹出窗口的打开和关闭
  const [dateVisible,setDateVisible]=useState(false)
  //控制时间显示,默认是当前时间
  const [currentDate,setCurrentDate]=useState(()=>{
    return dayjs(new Date()).format('YYYY-MM')
  })
  //存放查询后按月的数组
  const [currentMonthList,setMonthList]=useState([])

  const monthResult = useMemo(() => {
    // 支出  /  收入  / 结余
    const pay = currentMonthList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
    const income = currentMonthList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
    return {
      pay,
      income,
      total: pay + income
    }
  }, [currentMonthList])

  //初始化的时候把当前月的统计数据显示出来
  useEffect(()=>{
    //当前日期
    const nowDate=dayjs().format('YYYY-MM')
    if(monthGroup[nowDate]){//确保有值再赋值
      setMonthList(monthGroup[nowDate])
    }
  },[monthGroup])

  //确定选中时间
  const onConfirm=(date)=>{
    setDateVisible(false)
    const formatDate=dayjs(date).format('YYYY-MM')
    //存放，月组中建值为formatDate的值
    setMonthList(monthGroup[formatDate] || [])
    setCurrentDate(formatDate)
  }

  //当前月按照日来做分组
  // const dayGroup=useMemo(()=>{
  //   return出计算之后的值,把当前月按日来进行分组
  //   return _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
  // },[currentMonthList])
  const dayGroup=useMemo(()=>{
    //return出计算之后的值,把当前月按日来进行分组
    const groupData=_.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
    //从得到当前月，日分组的数据中得到key值（也就是日期列表），
    const keys=Object.keys(groupData)
    return {
      groupData,
      keys
    }
  },[currentMonthList])

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        
        <div className="header">
          {/* 时间切换区域 */}
          <div onClick={()=>setDateVisible(true)} className="date">
            <span className="text">
              {currentDate + ''}月账单
            </span>
            {/* <span className='arrow dateVisible & expand'></span> */}
            {/* 思路：根据当前弹框打开的状态控制expand类名是否存在 */}
            <span className={classNames('arrow', dateVisible && 'expand')}></span>            
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onCancel={()=>setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={()=>setDateVisible(false)}
            max={new Date()}
          />
        </div>

        {/* 单日列表统计 */}
        {/* <DailyBill/> */}
        {
          dayGroup.keys.map(key => {
            return <DailyBill key={key} date={key} billList={dayGroup.groupData[key]} />
          })
        }

      </div>
    </div>
  )
}

export default Month